<template>
    <div>
        <Form id="login" ref="formInline" :model="formInline" :rules="ruleInline" inline>
            <FormItem prop="username">
                <Input type="text" v-model="formInline.username" placeholder="用户名">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>

            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="密码">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>

            <FormItem>
                <Button type="primary" v-on:click="handleSubmit('formInline')">登录</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
    import $ from '../../lib/util';
    import qs from 'qs';

    export default {
        data() {
            return {
                formInline: {
                    username: 'admin',
                    password: 'admin'
                },
                ruleInline: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
            handleSubmit(username) {
                this.$refs[username].validate((valid) => {
                    if (valid) {
                        this.loginMethod();
                    } else {
                        this.$Message.error('失败!');
                    }
                })
            },
            loginMethod() {
                const _this = this;

                $.openProcessLoading(_this, '正在登陆');
                this.$store.commit('$_removeStorage');
                $.ajax.post('/authentication/form', qs.stringify(this.formInline))
                    .then(res => {
                    if (!res.code) {
                        _this.$store.commit('$_setStorage', res.msg);
                        _this.handleSpinCustom();
                    } else {
                        $.closeProcessLoading(_this);
                        _this.$store.commit('$_removeStorage');
                        this.$Message.error(res.msg);

                    }
                }).catch(err =>{
                    _this.$Message.error('当前服务不可用!');
                    $.closeProcessLoading(_this);
                });
            },
            handleSpinCustom() {
                this.$router.push('/index');
            }
        }

    }
</script>

<style scoped>
    #login {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
